import {
  createRouter,
  createWebHashHistory
} from 'vue-router'
import Layout from '@/views/Layout.vue'
import Home  from '@/views/Home/Home.vue'
const Login = () => import('@/views/Login.vue')
const MerchantLogin = () => import('@/views/MerchantLogin.vue')
const Category = () => import('@/views/Category/Category.vue')
const Merchant = () => import('@/views/Merchant/Merchant.vue')
const Products = () => import('@/views/Merchant/Products.vue')
const Balance = () => import('@/views/Merchant/Balance.vue')
const Password = () => import('@/views/Merchant/Password.vue')
const AddProduct = () => import('@/views/Merchant/AddProduct.vue')
const UserProfile = () => import('@/views/UserProfile.vue')
const ShoppingCart = () => import('@/views/Home/ShoppingCart.vue')
const Checkout = () => import('@/views/Home/Checkout.vue')
const OrderList = () => import('@/views/Home/OrderList.vue')

const routes = [{
    path: '/',
    name: 'Layout',
    component: Layout,
    children:[
      {
        path: '/',
        component:Home
      },{
        path:'/category/:id',
        component:Category
      }, {
        path: '/user/profile',
        component: UserProfile
      }, {
        path: '/cart',
        component: ShoppingCart
      }, {
        path: '/orders',
        component: OrderList
      }
    ]
  }, {
    path: '/checkout',
    component: Checkout
  }, {
    path: '/login',
    component: Login
  }, {
    path: '/merchant-login',
    component: MerchantLogin
  }, {
    path: '/merchant',
    component: Merchant,
    children: [
      { 
        path: '/merchant/products', 
        component: Products 
      },
      {
        path: '/merchant/add-product', 
        component: AddProduct 
      },
      {
        path: '/merchant/balance',
        component: Balance
      },
      {
        path: '/merchant/password',
        component: Password
      }
    ]
  }

]

const router = createRouter({
  // Hash模式
  history: createWebHashHistory(),
  routes
})

export default router